@import "../sass/公共类.scss";

.content {
    .header {
        .h-right {
            select {
                @include headerRight();
            }
        }
    }
    .subject {
        width: footerVw(710);
        margin: 0 footerVw(20);
        .search {
            width: footerVw(512);
            // background: chocolate;
            margin: 0 footerVw((710-512)/2);
            .s-top {
                div {
                    height: footerVw(60); 
                    width: footerVw(270);
                    border: footerVw(4) solid $orangeColor;   
                    border-radius: footerVw(50); 
                    margin:  0 footerVw((512-270)/2);
                    display: flex;
                    justify-content: space-around;
                    position: relative;
                    input {
                        font-size: footerVw(25);
                        width: footerVw(225);
                        background: none;
                        border: none;         
                    }
                    img:first-of-type {
                        width: footerVw(29);
                        height: footerVw(30);
                        position: absolute;
                        right: footerVw(30);
                        top: footerVw(10);
                    }
                    img:last-of-type {
                        width: footerVw(15);
                        height: footerVw(14);
                        position: absolute;
                        right: footerVw(20);
                        top: footerVw(30);
                    }
                }
            }
            .s-bottom {
                text-align: center;
                margin: footerVw(20) 0;
                h4 {
                    font-size: footerVw(26);
                    font-weight: 650;
                    margin-bottom: footerVw(15);
                }
                ul {
                    @include flex();
                    flex-wrap: wrap;
                    li {
                        width: footerVw(125);
                        height: footerVw(65);
                        line-height: footerVw(65);
                        font-size: footerVw(20);
                        color: rgb(139, 138, 138);
                        background: rgb(212, 205, 205);
                        margin: footerVw(2) 0;
                        &:hover {
                            background: $orangeColor;
                            color: black
                        }
                    }
                }
            }
        }
        .hotSearch {
            // margin-top: footerVw(20);
            .h-top {
                @include flex();
                // background: cadetblue;
                margin: footerVw(50) 0;
                .left {
                    width: footerVw(225);
                    @include flex();
                    line-height: footerVw(70);
                    img {
                        width: footerVw(70);
                        height: footerVw(70);
                    }
                    h3 {
                        font-size: footerVw(36);
                    }
                }
                .right {
                    width: footerVw(100);
                    @include flex();
                    line-height: footerVw(70);
                    a {
                        color: black;
                        font-size: footerVw(28);
                    }
                    img{
                        width: footerVw(30);
                        height: footerVw(30);
                        margin: auto 0;
                    }
                }
            }
            .h-bottom {
                @include flex();
                flex-wrap: wrap;
                margin: footerVw(40) 0;
                position: relative;
                img {
                   &:first-of-type {
                       width: footerVw(270);
                   }
                   &:nth-of-type(2) {
                       width: footerVw(430);
                       height: footerVw(150);
                   }
                   &:nth-of-type(3) {
                       width: footerVw(210);
                       height: footerVw(180);
                       position: absolute;
                       left: footerVw(280);
                       bottom: 0;
                   }
                   &:last-of-type {
                        width: footerVw(210);
                        height: footerVw(180);
                        position: absolute;
                        right: 0;
                        bottom: 0;
                   }
                }
            }
        }
        .recommend {
            // margin-top: footerVw(20);
            .r-top {
                @include flex();
                // background: cadetblue;
                margin: footerVw(50) 0;
                .left {
                    width: footerVw(225);
                    @include flex();
                    line-height: footerVw(70);
                    img {
                        width: footerVw(70);
                        height: footerVw(70);
                    }
                    h3 {
                        font-weight: 550;
                        font-size: footerVw(36);
                    }
                }
                .right {
                    width: footerVw(100);
                    @include flex();
                    line-height: footerVw(70);
                    a {
                        color: black;
                        font-size: footerVw(28);
                    }
                    img{
                        width: footerVw(30);
                        height: footerVw(30);
                        margin: auto 0;
                    }
                }
            }
            .r-bottom {
                @include flex();
                margin: footerVw(40) 0;
                img {
                    width: footerVw(225);
                }
            }
        }

    }
}